<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>新增页面</title>
		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	</head>
	<body>
		<form class="layui-form" action="">
			<div class="mainBox">
				<div class="main-container">

					<div class="layui-form-item layui-inline layui-hide">
						<label class="layui-form-label">地址</label>
						<div class="layui-input-inline">
							<input type="text" name="addrid" placeholder="" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">所在省</label>
						<div class="layui-input-inline">
							<select name="prov" id="prov" lay-filter="prov">
								<option value="">请选择所在省</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">所在市</label>
						<div class="layui-input-inline">
							<select name="cit" id="cit">
								<option value="">请选择所在市</option>
							</select>
						</div>
					</div>


					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">详细地址</label>
						<div class="layui-input-inline">
							<input type="text" name="detailaddr" placeholder="" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">门店名</label>
						<div class="layui-input-inline">
							<input type="text" name="sname" placeholder="" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item layui-inline">
						<label class="layui-form-label">联系方式</label>
						<div class="layui-input-inline">
							<input type="text" name="contact" placeholder="" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">门店图片</label>
						<div class="layui-input-block">
							<input type="text"   name="coverimg" lay-verify="idcardpic" autocomplete="off" placeholder="照片" id="idcardpic"
								   class="layui-input">
							<input class="btn-upload file-up" style="display: inline-block;" type="file" accept="image/*"  name="edit" id="edit" value="上传">
						</div>
						<div class="layui-input-block">
							<img id="preview" height="200px" width="300px" src="#" alt="没有选择"/>
							<span id="demoText"></span>
						</div>
					</div>

				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
						lay-filter="user-save">
						<i class="layui-icon layui-icon-ok"></i>
						提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>
		<script>


			layui.use(['form', 'jquery','upload'], function() {
				let form = layui.form;
				let $ = layui.jquery;
				var layer = layui.layer;
				var upload = layui.upload;


				$.ajaxSetup({
					headers:{
						'Authorization':window.sessionStorage.getItem("token")
					}
				})



				// 二级联动 第一步 渲染父级
				$.ajax({
					url: window.BASEPATH +'city/selectById/0',	// 后台取到所有的科室名称
					dataType: 'json',
					type: 'get',
					success: function (resData) {

						$.each(resData.data, function (index, value) {
							// 这里的 value.roomName
							// 前者是页面显示的值，后者是传递给后台的值。
							// 正常情况下，后者应该是 value.id
							$('#prov').append(new Option(value.name, value.id));	// 下拉菜单里添加元素
						});

						//渲染select
						form.render('select');

						// 默认选中第一个选项
						// var firstValue = resData.data[0].id; // 假设第一个选项的id为获取的id属性或者其他标识
						// $('#room').val(firstValue);
						// form.render('select');
					}
				});


				// 第二步 监听父级，每当父级发生变化时，渲染子级的值
				form.on('select(prov)', function(data){

					var provName = data.value; // roomName 选中的科室名称


					$.ajax({
						url: window.BASEPATH +'city/selectById/'+provName,// 传入科室名称，查找该科室的所有床号
						dataType: 'json',
						type: 'get',
						success: function (resData) {

							// 清空床号
							$('#cit').empty();

							$.each(resData.data, function (index, value) {
								// 这里的 value.bedNo
								// 前者是页面显示的值，后者是传递给后台的值。
								// 正常情况下，后者应该是 value.id
								$('#cit').append(new Option(value.name, value.id));// 下拉菜单里添加元素
							});

							//渲染select
							form.render('select');
						}
					});
				});



				form.on('submit(user-save)', function(data) {

					// 获取所选的所在省和所在市的值
					var provValue = $('#prov').val();
					var citValue = $('#cit').val();
					if (citValue==null){
						data.field.addrid=provValue;
					}else {
						data.field.addrid = citValue;
					}
					// 将所在市的值赋给addrid字段

					$.ajax({
						url: window.BASEPATH+'shop/add',
						data: data.field,
						type: 'post',
						success: function(result) {
							if (result.code==0) {
								layer.msg(result.msg, {
									icon: 1,
									time: 1000
								}, function() {
									parent.layer.close(parent.layer.getFrameIndex(window
										.name)); //关闭当前页
									parent.layui.table.reload("user-table");
								});
							} else {
								layer.msg(result.msg, {
									icon: 2,
									time: 1000
								});
							}
						}
					})
					return false;
				});



				var uploadInst = upload.render({
					elem: '#edit'
					,url: window.BASEPATH+'upload2' //改成您自己的上传接口
					,accept: 'file'
					//,accept: '*'
					,auto: true  //选择文件后不自动上传

					,choose: function(obj){
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result){
							$('#preview').attr('src', result); //图片链接（base64）
						});


					}
					,before: function(obj){
						layer.msg('上传中', {icon: 16, time: 0});
					}
					,done: function(res){
						//如果上传失败
						if(res.code > 0){
							return layer.msg('上传失败');
						}
						$("#idcardpic").val(res.data);
						//上传成功的一些操作
						layer.msg("信息上传成功！",{time: 3000});
					}
					,error: function(){
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function(){
							uploadInst.upload();
						});
					}

				});
			})
		</script>
		<script>
		</script>
	</body>
</html>
